<template>
    <div class="page changeCard logout">
        <div class="fromWrap">
            <header-view title="销户"></header-view>
            <form class="userComForm">
                <div :class="{active: phone}">
                    <label>手机号</label>
                    <input type="tel" v-model="phone" readonly placeholder="请输入手机号" style="color: #b1b1b1;"/>
                </div>
                <div class="qrCode qrCodeMM" :class="{active: MessageCode}">
                    <label>验证码</label>
                    <input type="tel" placeholder="6位" v-model="MessageCode"/>
                    <span><b></b><a @click="sendCode" :class="{activeColor:!isSendCode}">{{timeTips}}</a></span>
                </div>
            </form>
            <button-view title="确定" @btnFnBack="closeAccount" style="width: 80%;margin: 2rem auto 0;"></button-view>
            <!--支付弹框-->
            <div class="comPayBox" v-show="showPwdModal">
                <a class="comPayCancel" @click="showPwdModal=!showPwdModal">取消</a>
                <div class="comSIPBWrap">
                    <input type="text" id="SIPBox" name="SIPBox" readonly class="comSIPBox"/>
                    <ul class="clearfix"><li></li><li></li><li></li><li></li><li></li><li></li></ul>
                </div>
                <div id="NumberKeyboard"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderView from './../components/header';
    import ButtonView from './../components/button';
    import utils from './../js/utils';
    export default {
        data(){
            return {
                phone: '',
                timeTips: '获取验证码',
                codeId: '',
                MessageCode: '',
                showPwdModal: false
            }
        },
        mounted(){
            this.GetMyInfo();
        },
        components:{
            HeaderView,
            ButtonView
        },
        computed:{
            isAllFill(){
                return this.pageType === '登录'
                    ? ( this.phone && this.password )
                    : ( this.phone && this.password && this.code && this.confirmpassword );
            },
            isSendCode:function(){
                return this.timeTips === '获取验证码' || this.timeTips === '重新获取验证码';
            }
        },
        methods:{
            /*
            * 获取信息
            * */
            GetMyInfo(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Mine/GetMyInfo',
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.phone = result.data.Phone;
                    }
                });
            },
            /*
           * 获取验证码
           * */
            sendCode(){
                utils.sendCode(this , { phone: this.phone , TemplateId: 'C04'} , 'Minsheng/getMobileCode');
            },
            /*
            *
            * */
            closeAccount(){
                let that = this;
                if(!utils.validate('code' , that.MessageCode)) return;
                utils.getPwdModal(this, function(val , randomData , keyboard ){
                    utils.ajax({
                        url: utils.AJAX_SRC + 'Minsheng/closeAccount',
                        params:{
                            MessageTaskId: that.codeId,
                            MessageCode: that.MessageCode,
                            PwdResult: val,
                            RandJnlNo: randomData.RandJnlNo,
                            Random: randomData.Random
                        },
                        success(result){
                            if(result.errcode < 0){
                                utils.showTips(result.errmsg);
                                return;
                            }
                            utils.showTips('账户已注销!');
                            that.$router.replace({path: '/wallet'});
                        }
                    });
                });
            }
        }
    }
</script>
